<nav class="nav navbar">
    <div class="nav-left">
        <div class="">
            <!-- [class.navbar-active]="isOpen" -->
            <button
                type="button"
                id="sidebarCollapse"
                (click)="toggleSideNav()"
                class="d-flex justify-content-center navbar-btn"
            >
                <i class="material-icons" style="font-size: 23px">dehaze</i>
            </button>
        </div>
        <div class="logo" (click)="home()">
            <div class="logo-area">
                <div>
                    <!-- 
                        <img class="logo-image" src="/mail/en-US/assets/images/kanban.png" alt="">
                    -->
                    <!--
                    <img class="logo-image" src="assets/images/logo.png" alt="logo" />

                    -->
                    <div>
                        <svg width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icon-tabler-tornado" version="1.1" id="svg144" sodipodi:docname="restdoc-new.svg" inkscape:version="1.2 (dc2aeda, 2022-05-15)" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
                            <defs id="defs148" />
                            <sodipodi:namedview id="namedview146" pagecolor="#ffffff" bordercolor="#000000" borderopacity="0.25" inkscape:showpageshadow="2" inkscape:pageopacity="0.0" inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1" showgrid="false" inkscape:zoom="33.75" inkscape:cx="10.237037" inkscape:cy="12" inkscape:window-width="1394" inkscape:window-height="962" inkscape:window-x="406" inkscape:window-y="123" inkscape:window-maximized="0" inkscape:current-layer="svg144" />
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" id="path132" />
                            <line x1="21" y1="4" x2="3" y2="4" id="line134" style="stroke-linecap:square" />
                            <line x1="13" y1="16" x2="7" y2="16" id="line136" style="stroke-linecap:square" />
                            <line x1="11" y1="20" x2="15" y2="20" id="line138" style="stroke-linecap:square" />
                            <line x1="6" y1="8" x2="20" y2="8" id="line140" style="paint-order:stroke fill markers;stroke-linejoin:bevel;stroke-linecap:square" />
                            <line x1="4" y1="12" x2="16" y2="12" id="line142" style="stroke-linecap:square" />
                        </svg>
                    </div>
                    <div>
                        <svg width="100.301" height="34.502" viewBox="0 0 344.301 74.502" xmlns="http://www.w3.org/2000/svg">
                            <g id="svgGroup" stroke-linecap="round" fill-rule="evenodd" font-size="9pt" stroke="#000" stroke-width="0.25mm" fill="black" style="stroke:#000;stroke-width:0.001mm;fill:black">
                                <path d="M 97.001 72.374 A 38.467 38.467 0 0 0 109.901 74.501 A 35.954 35.954 0 0 0 112.895 74.38 Q 115.839 74.134 118.285 73.384 A 16.719 16.719 0 0 0 124.151 70.301 Q 129.201 66.101 129.201 59.701 Q 129.201 54.501 126.551 51.401 Q 123.901 48.301 120.201 46.851 Q 116.501 45.401 110.601 43.901 A 83.935 83.935 0 0 1 108.701 43.46 Q 105.742 42.735 103.721 41.98 A 18.838 18.838 0 0 1 101.901 41.201 A 6.522 6.522 0 0 1 101.187 40.788 Q 99.101 39.391 99.101 36.801 A 5.356 5.356 0 0 1 100.542 33.082 A 7.908 7.908 0 0 1 102.151 31.751 A 10.559 10.559 0 0 1 104.525 30.64 Q 105.851 30.201 107.455 29.991 A 24.342 24.342 0 0 1 110.601 29.801 Q 116.201 29.801 122.001 31.601 Q 122.551 31.738 122.959 31.781 A 3.283 3.283 0 0 0 123.301 31.801 A 4.744 4.744 0 0 0 123.406 31.8 A 3.775 3.775 0 0 0 126.151 30.601 Q 127.301 29.401 127.301 27.801 A 3.764 3.764 0 0 0 127.125 26.662 A 4.423 4.423 0 0 0 126.551 25.501 Q 125.801 24.401 124.401 24.001 A 39.532 39.532 0 0 0 122.579 23.381 A 42.161 42.161 0 0 0 109.901 21.501 Q 105.054 21.501 101.363 22.671 A 16.428 16.428 0 0 0 95.451 25.901 Q 90.401 30.301 90.401 37.301 A 15.084 15.084 0 0 0 90.711 40.44 A 10.415 10.415 0 0 0 93.151 45.351 Q 95.901 48.401 99.751 49.901 Q 103.601 51.401 109.501 52.801 A 112.16 112.16 0 0 1 112.1 53.504 Q 114.658 54.232 116.373 54.882 A 20.929 20.929 0 0 1 117.851 55.501 A 5.969 5.969 0 0 1 118.996 56.193 A 3.418 3.418 0 0 1 120.401 59.001 Q 120.401 66.101 109.301 66.101 A 34.764 34.764 0 0 1 105.726 65.925 A 25.966 25.966 0 0 1 102.101 65.301 A 37.542 37.542 0 0 1 101.701 65.198 A 40.633 40.633 0 0 1 95.701 63.101 A 5.076 5.076 0 0 0 95.363 62.965 A 4.281 4.281 0 0 0 93.901 62.701 A 4.691 4.691 0 0 0 93.73 62.704 A 3.604 3.604 0 0 0 91.101 63.901 Q 90.001 65.101 90.001 66.701 A 5.022 5.022 0 0 0 90.005 66.914 Q 90.049 67.936 90.513 68.735 A 4.034 4.034 0 0 0 91.701 70.001 A 35.72 35.72 0 0 0 97.001 72.374 Z M 216.701 29.101 L 216.701 4.601 A 4.851 4.851 0 0 1 216.978 2.932 A 4.269 4.269 0 0 1 218.051 1.301 Q 219.401 0.001 221.301 0.001 A 4.389 4.389 0 0 1 223.273 0.44 A 4.423 4.423 0 0 1 224.501 1.351 Q 225.801 2.701 225.801 4.601 L 225.801 69.501 A 4.571 4.571 0 0 1 225.434 71.349 A 4.385 4.385 0 0 1 224.501 72.701 Q 223.201 74.001 221.301 74.001 Q 219.401 74.001 218.051 72.701 Q 216.701 71.401 216.701 69.501 L 216.701 66.901 A 25.673 25.673 0 0 1 209.703 72.162 A 22.235 22.235 0 0 1 199.601 74.501 Q 193.401 74.501 187.851 71.351 Q 182.301 68.201 178.851 62.151 A 26.057 26.057 0 0 1 175.755 52.979 A 33.884 33.884 0 0 1 175.401 48.001 A 32.117 32.117 0 0 1 176.21 40.635 A 25.305 25.305 0 0 1 178.851 33.851 A 25.423 25.423 0 0 1 183.688 27.689 A 22.546 22.546 0 0 1 187.851 24.651 Q 193.401 21.501 199.601 21.501 A 22.706 22.706 0 0 1 215.749 28.153 A 30.38 30.38 0 0 1 216.701 29.101 Z M 76.801 51.201 L 42.901 51.201 Q 43.701 58.201 48.101 62.101 A 14.548 14.548 0 0 0 53.763 65.144 Q 56.698 66.001 60.401 66.001 Q 64.158 66.001 67.075 65.361 A 21.27 21.27 0 0 0 67.751 65.201 Q 70.901 64.401 73.901 62.901 A 3.807 3.807 0 0 1 75.243 62.523 A 4.675 4.675 0 0 1 75.701 62.501 Q 77.301 62.501 78.501 63.601 A 3.604 3.604 0 0 1 79.698 66.23 A 4.691 4.691 0 0 1 79.701 66.401 Q 79.701 68.39 77.575 69.807 A 8.635 8.635 0 0 1 77.101 70.101 A 38.855 38.855 0 0 1 72.265 72.421 A 32.32 32.32 0 0 1 69.401 73.401 A 24.058 24.058 0 0 1 66.313 74.06 Q 64.673 74.308 62.754 74.416 A 56.017 56.017 0 0 1 59.601 74.501 Q 47.401 74.501 40.551 67.551 Q 34.092 60.998 33.723 49.422 A 44.612 44.612 0 0 1 33.701 48.001 A 33.931 33.931 0 0 1 34.93 38.758 A 30.482 30.482 0 0 1 36.301 34.901 Q 38.901 28.901 44.301 25.201 A 20.695 20.695 0 0 1 52.191 21.989 A 28.637 28.637 0 0 1 57.601 21.501 A 26.702 26.702 0 0 1 64.099 22.259 A 21.156 21.156 0 0 1 70.401 24.951 Q 75.801 28.401 78.601 34.151 A 28.077 28.077 0 0 1 81.39 45.855 A 32.562 32.562 0 0 1 81.401 46.701 Q 81.401 48.601 80.151 49.901 A 4.16 4.16 0 0 1 77.738 51.129 A 5.922 5.922 0 0 1 76.801 51.201 Z M 326.001 74.501 Q 318.801 74.501 312.701 71.301 Q 306.601 68.101 302.951 62.101 A 24.89 24.89 0 0 1 299.622 52.625 A 32.222 32.222 0 0 1 299.301 48.001 A 30.292 30.292 0 0 1 300.157 40.647 A 24.146 24.146 0 0 1 302.951 33.901 Q 306.601 27.901 312.701 24.701 Q 318.801 21.501 326.001 21.501 Q 330.678 21.501 334.226 22.552 A 19.768 19.768 0 0 1 335.151 22.851 Q 339.001 24.201 342.301 26.301 A 4.87 4.87 0 0 1 343.46 27.326 A 3.835 3.835 0 0 1 344.301 29.801 A 3.806 3.806 0 0 1 343.556 32.053 A 5.15 5.15 0 0 1 343.151 32.551 A 4.225 4.225 0 0 1 342.199 33.337 A 3.275 3.275 0 0 1 340.501 33.801 A 4.305 4.305 0 0 1 338.919 33.491 A 5.437 5.437 0 0 1 338.301 33.201 Q 335.926 31.977 334.043 31.246 A 24.067 24.067 0 0 0 332.651 30.751 Q 330.824 30.168 328.302 30.038 A 29.233 29.233 0 0 0 326.801 30.001 A 24.082 24.082 0 0 0 321.211 30.612 A 16.133 16.133 0 0 0 313.301 34.951 Q 308.401 39.901 308.401 48.001 A 21.728 21.728 0 0 0 309.148 53.847 A 16.265 16.265 0 0 0 313.301 61.051 A 16.163 16.163 0 0 0 321.325 65.416 A 24.19 24.19 0 0 0 326.801 66.001 A 27.054 27.054 0 0 0 329.264 65.895 Q 330.463 65.785 331.486 65.561 A 12.957 12.957 0 0 0 332.651 65.251 Q 334.35 64.708 336.546 63.669 A 58.115 58.115 0 0 0 338.301 62.801 A 5.069 5.069 0 0 1 339.452 62.337 A 4.153 4.153 0 0 1 340.501 62.201 A 3.364 3.364 0 0 1 342.74 63.054 A 4.725 4.725 0 0 1 343.151 63.451 A 4.66 4.66 0 0 1 343.916 64.55 A 3.702 3.702 0 0 1 344.301 66.201 A 3.858 3.858 0 0 1 342.929 69.227 A 5.456 5.456 0 0 1 342.301 69.701 Q 339.001 71.801 335.151 73.151 A 22.491 22.491 0 0 1 331.223 74.12 Q 329.268 74.429 327.042 74.487 A 39.946 39.946 0 0 1 326.001 74.501 Z M 144.001 61.301 L 144.001 30.301 L 136.901 30.301 A 1.917 1.917 0 0 1 136.106 30.139 A 1.862 1.862 0 0 1 135.551 29.751 A 1.832 1.832 0 0 1 135.001 28.426 A 2.308 2.308 0 0 1 135.001 28.401 A 1.997 1.997 0 0 1 135.618 26.95 A 2.936 2.936 0 0 1 135.901 26.701 L 149.501 13.401 A 4.519 4.519 0 0 1 149.998 12.966 Q 150.625 12.501 151.201 12.501 A 1.751 1.751 0 0 1 152.494 13.041 A 2.191 2.191 0 0 1 152.551 13.101 Q 153.101 13.701 153.101 14.501 L 153.101 22.501 L 164.401 22.501 A 4.3 4.3 0 0 1 165.773 22.711 A 3.622 3.622 0 0 1 167.201 23.601 A 3.712 3.712 0 0 1 168.288 26.036 A 4.967 4.967 0 0 1 168.301 26.401 Q 168.301 28.001 167.201 29.151 A 3.673 3.673 0 0 1 164.572 30.298 A 4.895 4.895 0 0 1 164.401 30.301 L 153.101 30.301 L 153.101 60.501 A 12.686 12.686 0 0 0 153.199 62.147 Q 153.433 63.927 154.224 64.849 A 2.729 2.729 0 0 0 154.951 65.451 A 7.585 7.585 0 0 0 157.029 66.236 Q 157.94 66.443 158.997 66.488 A 14.124 14.124 0 0 0 159.601 66.501 Q 161.601 66.501 163.601 65.901 Q 164.001 65.801 164.451 65.701 Q 164.901 65.601 165.601 65.601 A 3.463 3.463 0 0 1 167.892 66.463 A 4.57 4.57 0 0 1 168.101 66.651 A 3.497 3.497 0 0 1 168.99 67.974 A 3.512 3.512 0 0 1 169.201 69.201 A 3.566 3.566 0 0 1 167.839 72.089 A 5.429 5.429 0 0 1 166.901 72.701 Q 163.001 74.501 158.601 74.501 A 23.53 23.53 0 0 1 153.091 73.913 Q 144.001 71.716 144.001 61.301 Z M 256.928 73.689 A 30.392 30.392 0 0 0 264.101 74.501 A 31.839 31.839 0 0 0 268.233 74.24 A 25.136 25.136 0 0 0 277.501 71.201 Q 283.301 67.901 286.501 61.851 Q 289.701 55.801 289.701 48.001 A 34.748 34.748 0 0 0 289.448 43.752 A 27.546 27.546 0 0 0 286.501 34.151 Q 283.301 28.101 277.501 24.801 A 24.294 24.294 0 0 0 271.46 22.378 A 29.695 29.695 0 0 0 264.101 21.501 Q 256.401 21.501 250.601 24.801 Q 244.801 28.101 241.651 34.151 A 26.813 26.813 0 0 0 239.364 40.315 A 32.921 32.921 0 0 0 238.501 48.001 A 35.125 35.125 0 0 0 238.778 52.478 A 27.785 27.785 0 0 0 241.651 61.851 Q 244.801 67.901 250.601 71.201 A 24.287 24.287 0 0 0 256.928 73.689 Z M 0.001 69.501 L 0.001 26.601 Q 0.001 24.701 1.301 23.351 Q 2.601 22.001 4.501 22.001 A 4.424 4.424 0 0 1 7.708 23.309 A 5.392 5.392 0 0 1 7.751 23.351 A 4.425 4.425 0 0 1 9.1 26.541 A 5.312 5.312 0 0 1 9.101 26.601 L 9.101 30.901 Q 16.101 21.501 24.801 21.501 L 25.301 21.501 A 4.556 4.556 0 0 1 26.939 21.786 A 4.122 4.122 0 0 1 28.451 22.801 A 4.429 4.429 0 0 1 29.7 25.941 A 5.733 5.733 0 0 1 29.701 26.001 A 4.519 4.519 0 0 1 29.452 27.529 A 3.901 3.901 0 0 1 28.401 29.101 A 4.48 4.48 0 0 1 25.833 30.258 A 6.061 6.061 0 0 1 25.101 30.301 L 24.601 30.301 Q 19.801 30.301 15.801 32.651 A 20.196 20.196 0 0 0 9.271 38.846 A 23.365 23.365 0 0 0 9.101 39.101 L 9.101 69.501 A 4.389 4.389 0 0 1 8.662 71.473 A 4.423 4.423 0 0 1 7.751 72.701 Q 6.401 74.001 4.501 74.001 A 4.571 4.571 0 0 1 2.652 73.634 A 4.385 4.385 0 0 1 1.301 72.701 Q 0.001 71.401 0.001 69.501 Z M 216.701 58.501 L 216.701 37.501 Q 213.601 34.101 209.551 32.051 Q 205.501 30.001 200.901 30.001 A 18.927 18.927 0 0 0 195.562 30.718 A 14.62 14.62 0 0 0 189.001 34.701 A 15.338 15.338 0 0 0 185.362 41.222 Q 184.501 44.238 184.501 48.001 A 26.436 26.436 0 0 0 184.985 53.225 Q 185.621 56.375 187.09 58.804 A 14.308 14.308 0 0 0 189.001 61.301 Q 193.501 66.001 200.901 66.001 Q 205.501 66.001 209.551 63.951 Q 213.601 61.901 216.701 58.501 Z M 264.101 66.201 Q 268.201 66.201 271.951 64.301 A 14.503 14.503 0 0 0 276.844 60.213 A 18.556 18.556 0 0 0 278.151 58.301 Q 280.333 54.649 280.571 49.252 A 30.601 30.601 0 0 0 280.601 47.901 Q 280.601 42.669 278.856 38.933 A 14.802 14.802 0 0 0 278.151 37.601 A 16.909 16.909 0 0 0 275.472 34.157 A 13.666 13.666 0 0 0 271.951 31.651 Q 268.201 29.801 264.101 29.801 Q 259.901 29.801 256.151 31.651 A 13.888 13.888 0 0 0 251.285 35.691 A 17.844 17.844 0 0 0 250.001 37.601 Q 247.844 41.284 247.625 46.663 A 30.428 30.428 0 0 0 247.601 47.901 Q 247.601 53.062 249.212 56.747 A 14.836 14.836 0 0 0 250.001 58.301 Q 252.401 62.401 256.151 64.301 Q 259.901 66.201 264.101 66.201 Z M 42.901 43.801 L 72.401 43.801 A 19.655 19.655 0 0 0 71.8 39.951 A 14.064 14.064 0 0 0 69.851 35.601 A 14.727 14.727 0 0 0 66.898 32.37 A 12.944 12.944 0 0 0 64.301 30.751 A 16.062 16.062 0 0 0 59.4 29.31 A 14.837 14.837 0 0 0 57.601 29.201 A 15.435 15.435 0 0 0 51.52 30.474 A 18.002 18.002 0 0 0 50.901 30.751 Q 47.601 32.301 45.401 35.601 A 14.2 14.2 0 0 0 43.527 39.819 Q 43.047 41.6 42.909 43.667 A 24.017 24.017 0 0 0 42.901 43.801 Z" vector-effect="non-scaling-stroke"></path>
                            </g>
                        </svg>
                    </div>
                </div>
                <div class="product-name">
                </div>
            </div>
        </div>
        <div class="menu-panel">
            <div class="project-logo">
                <ng-container *ngIf="projectId == '0'">
                    <span>
                        <i class="material-icons">list</i>
                    </span>
                </ng-container>
                <ng-container *ngIf="projectId != '0'">
                    <span>
                        <i class="material-icons" [ngStyle]="{'color': icon_color}">{{icon}}</i>
                    </span>
                </ng-container>
            </div>
            <div class="project-info">
                <ng-container *ngIf="projectId == '0'">
                    <div class="project-name" i18n="Headers|All">All</div>
                </ng-container>
                <ng-container *ngIf="projectId != '0'">
                    <div class="project-name">
                        <div class="project-icon" [matMenuTriggerFor]="projectMenu" [ngStyle]="{'color': name_color}">
                            <i class="material-icons">more_vert</i>
                        </div>
                        <div>
                            <span [ngStyle]="{'color': name_color}">{{projectName}}</span>
                        </div>
                    </div>
                </ng-container>
            </div>
            <mat-menu #projectMenu="matMenu">
                <div class="menu-item" mat-menu-item (click)="editProjectDetail()">
                    <div class="menu-item-line">
                        <i class="material-icons">edit</i>
                        <span i18n="Header|editProjectName">Edit project name</span>
                    </div>
                </div>
                <div class="menu-item" mat-menu-item (click)="editProjectEndpoints()">
                    <div class="menu-item-line">
                        <i class="material-icons">edit</i>
                        <span i18n="Header|editProjectEndpoints">Edit project endpoints</span>
                    </div>
                </div>
                <div class="menu-item" mat-menu-item (click)="customColor()">
                    <div class="menu-item-line">
                        <i class="material-icons">palette</i>
                        <span i18n="Header|custom icon & color">Custome icon & color</span>
                    </div>
                </div>
                <div class="menu-item" mat-menu-item (click)="deleteProject(projectId)">
                    <div class="menu-item-line">
                        <i class="material-icons">delete</i>
                        <span i18n="Header|deleteProject">Delete project</span>
                    </div>
                </div>
            </mat-menu>
        </div>
    </div>
    <div class="nav-end">
        <div class="nav-buttons">
            <button id="settingsbtn" (click)="settingPage()" data-toggle="tooltip" data-placement="bottom" title="Settings menu" class="btn d-flex justify-content-center ">
                <i class="material-icons">settings</i>
            </button>
            <button id="appsbtn" [matMenuTriggerFor]="appMenu"
                class="btn d-flex justify-content-center"
                data-toggle="tooltip"
                title="More Apps"
                data-placement="bottom"
            >
                <i class="material-icons">apps</i>
            </button>
            <button id="profilebtn" [matMenuTriggerFor]="accountMenu"
                class="btn d-flex justify-content-center"
                data-toggle="tooltip"
                data-placement="bottom"
            >
                <i class="material-icons">account_circle</i>
            </button>
        </div>
        <mat-menu #accountMenu="matMenu">
            <button mat-menu-item (click)="logout()" i18n="Header|Logout">Logout</button>
        </mat-menu>
        <mat-menu #appMenu="matMenu" class="app-menu">
            <div class="app-list">
            </div>
        </mat-menu>
    </div>
</nav>